<!--
 * @Description:
 * @Version: 2.0
 * @Autor: kafei
 * @Date: 2021-11-22 15:37:19
 * @LastEditors: kafei
 * @LastEditTime: 2021-12-22 13:53:44
-->
<template>
  <div class="systemRoute z-w-100 flex">
    <div class="systemRoute__left">
      <div
        class="systemRoute__treeWrapper"
      >
        <baseTree
          ref="baseTree"
          v-model="treeValue"
          :data="treeData"
          :props="treeProps"
          :default-expand-all="true"
          @treeClick="treeClick"
        />
      </div>
    </div>
    <rightContent
      ref="rightContent"
      @btnClick="btnClick"
      @saveSuccess="saveSuccessFun"
      @reset="resetFun"
    />
  </div>
</template>

<script>
import baseTree from '@/components/baseTree/index.vue'
import { getAllMenu } from '@/api/menu'
import { listToTree } from '@/store/rouerConfig.js'
import rightContent from './components/rightContent/index.vue'
// import ButtonConfig from '@/components/ButtonConfig/index.vue'
export default {
  name: 'SystemRoute',
  components: {
    baseTree,
    rightContent
    // ButtonConfig
  },
  data () {
    return {
      treeData: [],
      treeProps: {
        children: 'children',
        label: 'mName'
      },
      treeValue: '',
      actionData: [
        { type: 'primary', text: '新增', actionType: 'new' }
      ],
      node: {}
    }
  },
  watch: {
    treeValue (nVal) {
      console.log(nVal, 'asddsa')
    }
  },
  created () {
    this.$nextTick(async () => {
      await this.getAllMenuFun()
    })
  },
  methods: {
    resetFun () {
      this.treeValue = ''
    },
    async getAllMenuFun () {
      const result = await getAllMenu()
      if (result.code === '0') {
        this.treeData = listToTree(result.data, { pId: 'parentId' })
        const targetValue = `${this.treeValue}`
        this.treeValue = `${targetValue}` ? this.treeValue : this.treeData[0] ? this.treeData[0].id : ''
        this.node = this.treeData[0] || {}
        this.$refs.rightContent.getMenuByIdFun(this.treeValue)
      }
    },
    btnClick (item) {
      if (item.actionType === 'notChose') {
        this.$refs.baseTree.setCurrentKey(null)
        this.treeClick({ data: null, node: null })
      }
    },
    async saveSuccessFun () {
      await this.getAllMenuFun()
    },
    treeClick ({ data, node }) {
      if (data && data.id) {
        this.node = data
        this.treeValue = data.id
        this.$refs.rightContent.getMenuByIdFun(data.id)
      } else {
        this.$refs.rightContent.getMenuByIdFun()
      }
    }
  }
}
</script>

<style>

</style>
